
//定义组件注册的模板template
var header = `<el-header class="flex items-center" style="border-bottom: 1px solid lightgray;">
            <a href="/"><img src="https://static-o.oss-cn-shenzhen.aliyuncs.com/sukoutu/images/btbsmLogo.png" style="width: 170px;"></a>
            <el-dropdown>
                <span class="el-dropdown-link px-3">
                    图像处理<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <a href="/commons" target="_blank">在线抠图</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/face" target="_blank">人脸编辑</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/colorize" target="_blank">图片编辑</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/zjzs" target="_blank">证件照</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/picstitching" target="_blank">图片拼接</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/longimg" target="_blank">长图拼接</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/cj" target="_blank">图片裁剪</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gdx" target="_blank">图片改大小</a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
            <el-dropdown>
                <span class="el-dropdown-link px-3">
                    图片生成类<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <a href="/atemplet" target="_blank">印章模板库</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/affixseal" target="_blank">在线盖章</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/ai" target="_blank">Ai绘画</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/qrcode" target="_blank">二维码生成</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/barcode" target="_blank">条形码生成</a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
            <el-dropdown>
                <span class="el-dropdown-link px-3">
                    图片压缩<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <a href="/jpg" target="_blank">jpg压缩</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/png" target="_blank">png压缩</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gifc" target="_blank">gif压缩</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/ya" target="_blank">证件照压缩</a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
            <el-dropdown>
                <span class="el-dropdown-link px-3">
                    gif工具<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <a href="/gif_combine" target="_blank">gif合成</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gif_puzzle" target="_blank">gif拼图</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gif_cropping" target="_blank">gif裁剪</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/video_gif" target="_blank">视频转gif</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gif_press" target="_blank">gif压缩</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <a href="/gif_addsticker" target="_blank">gif编辑器</a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            
            <a href="/chathome" class="px-3 text-sm">Ai写作</a>
            <a href="/" class="px-3 text-sm">印章生成</a>
            
            <a href="/alltools" target="_blank" class="px-3 text-sm">
                工具箱
            </a>
                
                
                
            <div class="absolute flex right-4">
                <div class="flex">
                    <span class="flex items-center hover:text-blue-500 mr-4" title="VIP充值">
                        <span class="inline-block"></span>
                        <span class="inline-block hover:text-blue-500">
                            <a href="/vip" target="_blank" class="gm-layout-nav__link flex flex-col items-center">
                                <svg width="24" height="24" fill="currentColor" aria-hidden="true" focusable="false">
                                    <use xlink:href="/common/images/icon.svg#vip-fill"></use>
                                </svg>
                                <span class="text-xs">VIP充值</span>
                            </a>
                        </span>
                    </span>
                </div>
                <div class="flex items-center mr-4" v-if="user">
                    <img :src="user.avatar" style="width: 32px;height: 32px;border-radius: 100%;">
                    <el-dropdown>
                        <span class="el-dropdown-link ml-4">
                            {{user.nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <a href="index/user/logout" class="btn btn-danger">
                                    <i class="fa fa-sign-out"></i>
                                    退出登录
                                </a>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div @click="loginAlert" v-else class="link-item weixin fl h-7 leading-7 mt-3 text-xs text-white bg-blue-700 px-3 rounded cursor-pointer">
                    登录/注册
                </div>
            </div>
            <div v-show="loginShow" class="fixed w-full h-full top-0 left-0 flex justify-center items-center" style="background-color: rgba(0,0,0,.6);z-index: 9999;">
                <div class="rounded-xl mb-25 flex relative" style="width: 36%;min-width: 390px;height: 52%;min-height: 420px;background-color: white;">
                    <div class="h-full" style="width: 36%;border-radius: 0.75rem 0 0 0.75rem;overflow: hidden;">
                        <img src="/common/images/loginBg.png" class="w-full h-full">
                    </div>
                    <div class="flex flex-col items-center" style="flex: 1;">
                        <p style="font-size: 24px;font-weight: 600;margin-top: 50px;">
                            <span style="color: blue;">{{ wxORphone?'微信扫码':'手机验证码' }}</span>
                            登录
                        </p>
                        <p style="font-size: 14px;color: gray;margin-top: 10px;">
                            登录后将自动注册账号
                        </p>
                        
                        <div id="wxCode" v-show="wxORphone" class="rounded-xl" style="width: 190px;height: 190px;margin-top: 10px;border: 1px solid lightgray;overflow: hidden;">
                            <img :src="ewmUrl">
                        </div>
                        <div v-show="!wxORphone" class="flex flex-col" style="width: 74%;height: 180px;margin-top: 10px;">
                            <el-input placeholder="请输入手机号" v-model="phoneNumber" clearable></el-input>
                            <div class="flex justify-between" style="margin-top: 20px;">
                                <el-input placeholder="请输入验证码" v-model="phoneCode" clearable style="margin-right: 10px;"></el-input>
                                <el-button type="primary" plain @click="codeBtn">{{ codeText }}</el-button>
                            </div>
                            <el-button type="primary" round @click="login" style="margin-top: 20px;">登录/注册</el-button>
                        </div>
                        
                        <div class="flex justify-between items-center" style="width: 80%;height: 20px;margin-top: 20px;">
                            <div class="" style="width: 36%;height: 1px;background-color: lightgray;"></div>
                            <span style="font-size: 14px;color: gray;white-space: nowrap;">选择登录方式</span>
                            <div class="" style="width: 36%;height: 1px;background-color: lightgray;"></div>
                        </div>
                        <div class="flex justify-center items-center" style="width: 80%;height: 20px;margin-top: 20px;font-size: 16px;color: gray;">
                            <div class="flex justify-center items-center cursor-pointer" @click="weixinBtn">
                                <img src="/common/images/vip/wxpay.webp" style="width: 16px !important;">
                                <span style="margin-left: 3px;margin-right: 20px;">微信登录</span>
                            </div>
                            <div class="flex justify-center items-center cursor-pointer" @click="phoneBtn">
                                <i class="el-icon-mobile"></i>
                                <span style="margin-left: 3px;">手机登录</span>
                            </div>
                        </div>
                    </div>
                    <i class="el-icon-circle-close absolute -top-6 -right-5 text-white text-2xl cursor-pointer" @click="closeLogin"></i>
                </div>
            </div>
        </el-header>`;
        
//Vue定义组件
var template_header = Vue.extend({
    template:header,
    //这里的data与vue对象的data类似，只不过组件中的data必须是函数的形式
    data(){
        return {
            loginShow: false,
            wxORphone: true,
            phoneNumber: '',
            phoneCode: '',
            codeText: '获取验证码',
            countdownTime: 60,
            user: '',
            
            ticket: '',
            ewmUrl: '',
        }
    },
    //这里的methods与vue对象的methods一样，可以在这里定义组件的函数 没用到也可以不写
    methods:{
        loginAlert() {
            this.loginShow = true
            this.qrcodeLogin()
            
            // 存储当前页面的url，用于登录后返回到当前页面
			var cookieName = "loginUrl";
            var cookieValue = window.location.pathname;
            var expires = '';
			document.cookie = cookieName + "=" + encodeURIComponent(cookieValue) + expires
        },
        closeLogin() {
            this.loginShow = false
        },
        weixinBtn() {
            this.wxORphone = true
        },
        phoneBtn() {
            this.wxORphone = false
        },
        codeBtn() {
			let that = this;
			var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|16[6]|17[0|1|2|3|5|6|7|8]|18[0-9]|19[8|9])\d{8}$/;
			if (!myreg.test(that.phoneNumber)) {
				this.$notify.error({
                    title: '错误',
                    message: '手机号不正确'
                });
				return;
			}
            sessionStorage.setItem(`login-phone-${that.phoneNumber}-code`, '0');
			axios.post('/send-phone-code?phone='+that.phoneNumber,{}).then( res=>{
                // console.log('验证码',res)
                that.codeText = res.data.message
            })
        },
        login() {
			let that = this;
			var myreg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|16[6]|17[0|1|2|3|5|6|7|8]|18[0-9]|19[8|9])\d{8}$/;
			if (!myreg.test(that.phoneNumber)) {
				this.$notify.error({
                    title: '错误',
                    message: '手机号不正确'
                });
				return;
			}
			if (that.phoneCode.length != 4) {
				this.$notify.error({
                    title: '错误',
                    message: '验证码不正确'
                });
				return;
			}
            window.location = '/phone-login?phone='+that.phoneNumber + '&code='+that.phoneCode
        },
        // 通过ticket获取到登录的二维码。
        getQrcode() {
            let that = this
            axios.post('/index/wechat/getQrcode',{}).then( res=>{
                // console.log('ticket',res)
                if(res.data.code == 200){
                    that.ticket = res.data.data.ticket
                    axios.post('/index/wechat/getQrcodeUrl?ticket='+that.ticket,{}).then( result=>{
                        // console.log('二维码url',result)
                        if(result.data.code == 200){
                            that.ewmUrl = result.data.data
                        }
                    })
                }
            })
        },
        // 轮询扫描结果
        async qrcodeLogin() {
            let that = this
            await axios.post('/index/wechat/qrcodeLogin?ticket='+that.ticket,{}).then( res=>{
                // console.log('扫描结果',res)
                switch (res.data.success) {
                    case false:
                        setTimeout(() => {
                            that.qrcodeLogin()
                        }, 2000);
                        break;
                    default:
                        // 轮询成功调用此接口跳转
                        window.location = '/index/user/qrcodeLogin';
                }
            })
        },
        // 获取用户信息
        getUserInfo() {
            let that = this
            axios.post('/api/user/userinfo',{}).then( res=>{
                // console.log('userinfo',res)
                if(res.data.data!=null){
                    that.user = res.data.data
                }
            })
        },
        getCookieByName(name) {
            const cookies = document.cookie.split(";");
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // 如果当前 cookie 是我们要找的
                if (cookie.startsWith(name + "=")) {
                    // 提取并返回 cookie 的值
                    return decodeURIComponent(cookie.substring(name.length + 1));
                }
            }
            // 如果没有找到 cookie，则返回 null 或空字符串
            return null;
        }
    },
    created() {
        let that = this
        const token = that.getCookieByName('token');
        if(token){
            // 获取用户信息
            that.getUserInfo()
            
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'visible') {
                    console.log('进入页面时，更新信息')
                    if(that.$parent.userVipOverplus){
                        axios.post('/api/user/userinfo',{}).then( res=>{
                            // console.log('用户剩余下载数',res.data.data.qtnum)
                            // 更新用户下载数
                            that.$parent.userVipOverplus = res.data.data.qtnum
                        })
                    }
                }
            })
        }else{
            // 如果没登录,获取登录二维码
            that.getQrcode()
        }
    },
    // 离开页面时，销毁事件
    destroyed() {
        document.removeEventListener('visibilitychange', () => {})
    },
    mounted() {
        let that = this
    },
    //props用来接收外部参数的
    props:[],
});

//Vue注册全局组件
Vue.component('zzx-header',template_header);
